<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Detail Admin - New User Form</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!-- bootstrap -->
<link href="css/bootstrap/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap/bootstrap-responsive.css" rel="stylesheet" />
<link href="css/bootstrap/bootstrap-overrides.css" type="text/css" rel="stylesheet" />

<!-- global styles -->
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<link rel="stylesheet" type="text/css" href="css/elements.css" />
<link rel="stylesheet" type="text/css" href="css/icons.css" />

<!-- libraries -->
<link rel="stylesheet" type="text/css" href="css/lib/font-awesome.css" />

<!-- this page specific styles -->
<link rel="stylesheet" href="css/compiled/new-user.css" type="text/css" media="screen" />

<!-- open sans font -->
<link
  href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800'
  rel='stylesheet' type='text/css' />

<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>

  <!-- navbar -->
  <div class="navbar navbar-inverse">
    <jsp:include page="import/navbar.jsp" />
  </div>
  <!-- end navbar -->

  <!-- sidebar -->
  <div id="sidebar-nav">
    <jsp:include page="import/sidebar.jsp" />
  </div>
  <!-- end sidebar -->


  <!-- main container -->
  <div class="content">

    <!-- settings changer -->
    <div class="skins-nav">
      <a href="#" class="skin first_nav selected"> <span class="icon"></span><span class="text">Default</span>
      </a> <a href="#" class="skin second_nav" data-file="css/skins/dark.css"> <span class="icon"></span><span
        class="text">Dark skin</span>
      </a>
    </div>

    <div class="container-fluid">
      <div id="pad-wrapper" class="new-user">
        <div class="row-fluid header">
          <h3>Tạo mới danh mục</h3>
        </div>

        <div class="row-fluid form-wrapper">
          <!-- left column -->
          <div class="span9 with-sidebar">
            <div class="container">
              <form action="create-category" class="new_user_form inline-input">
                <div class="span12 field-box">
                  <label>Tên danh mục:</label> <input class="span9" type="text" name="categoryName" />
                </div>
                <div class="span11 field-box actions">
                  <button class="btn-glow primary" >Tạo danh mục</button> <span>OR</span> <input
                    type="reset" value="Thoát" class="reset" />
                </div>
              </form>
            </div>
          </div>

          <!-- side right column -->
          <div class="span3 form-sidebar pull-right">
            <div class="btn-group toggle-inputs hidden-tablet">
              <button class="glow left active" data-input="inline">INLINE INPUTS</button>
              <button class="glow right" data-input="normal">NORMAL INPUTS</button>
            </div>
            <div class="alert alert-info hidden-tablet">
              <i class="icon-lightbulb pull-left"></i> Click above to see difference between inline and normal inputs on
              a form
            </div>
            <h6>Sidebar text for instructions</h6>
            <p>Add multiple users at once</p>
            <p>Choose one of the following file types:</p>
            <ul>
              <li><a href="#">Upload a vCard file</a></li>
              <li><a href="#">Import from a CSV file</a></li>
              <li><a href="#">Import from an Excel file</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- end main container -->


  <!-- scripts -->
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/theme.js"></script>

  <script type="text/javascript">
			$(function() {

				// toggle form between inline and normal inputs
				var $buttons = $(".toggle-inputs button");
				var $form = $("form.new_user_form");

				$buttons.click(function() {
					var mode = $(this).data("input");
					$buttons.removeClass("active");
					$(this).addClass("active");

					if (mode === "inline") {
						$form.addClass("inline-input");
					} else {
						$form.removeClass("inline-input");
					}
				});
			});
		</script>
</body>
</html>